<template>
  <div class="loading">
    <p>
      key值的作用主要用来减少没必要的diff算法的对比，对于同一个组件或者节点来说，只要父节点状态或属性发生改变，该组件就会进行diff
   对比，即使该组件没有发生改变；如果为该组件引入key值，在进行diff对比前先做一次校验，判断该组件是否需要diff对比，也可以判断该
   组件是直接更新操作还是销毁或者新建操作，从而提高了diff算法的效率；特别在渲染同级同结构的组件们时，key可以为它们加上了身份的
   标志，在rerender时，可以通过key来判断该组件是否已经存在，是否需要跟新或者销毁，新建等操作，提高了diff算法在同级节点上的操作。
   原理： 因为在reactelement中有一个属性是key，该属性默认是为空值，所以一般情况下，只要组件不加上key值，react是不会去校验组件
   的key，而是直接采用diff算法进行对比，一旦组件加上了key值，react就会在渲染时对该组件的身份进行校验，首先校验新旧组件的key值
   是不是一致，不一致的话，该组件直接销毁，然后在新建该组件；如果一致，则比较组件的属性是否发生变化，如果发生变化，则采用diff算
   法进行对比，然后得出差异对象，如果属性没发生变化，则认为该组件不需要改变；
    </p>
     <input 
      type="text" 
      :value="password" 
      @input="$emit('update:password', $event.target.value)"
    >
    <input 
      type="text" 
      :value="username" 
      @input="$emit('update:username', $event.target.value)"
    >
  </div>
</template>

<script lang="ts">
import { defineComponent  } from "vue";

export default defineComponent({
  name: "Loading",
  props:{
    password: {
      type: String,
      required: true
    },
    username: {
      type: String,
      required: true
    }
  },
  setup() {
   
  }
});
</script>

<style lang='scss'>

</style>
